<template>
 <div class="item-card-warp">
  <div class="list-container bg-white"
       :class="[exception?'exception':'',shadow?'shadow':'']"
  >
   <div class="card-title">
    <div class="title-warp">

     <div class="prefix">
      <div class="icon">
       <slot name="icon"></slot>
      </div>
      <div>
       <slot name="title"></slot>
      </div>
     </div>

     <div class="suffix text-grey-300">
      <slot name="progress"></slot>
     </div>

    </div>

   </div>

   <div class="content">
    <slot></slot>
    <div class="exception-tip"
         v-if="exception">
     <span class="">
      <image class="image-icon-md error-icon"
             src="@/static/icons/icon-exception.png"></image>
     </span>
     <slot name="error"></slot>
    </div>
   </div>

   <div class="card-footer"
        v-if="footer">
    <slot name="footer"></slot>
   </div>
  </div>
 </div>
</template>

<script setup>

const props = defineProps({
  shadow: {
    type: Boolean,
    default: false
  },
  exception: {
    type: Boolean,
    default: false
  },
  footer: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['cardClick'])

const card_click = function (e) {
  emits('cardClick')
}
</script>

<style lang="scss"
       scoped>
 .item-card-warp {

  .list-container {
   margin: 15rpx 25rpx;
   overflow: hidden;
   border-radius: 15rpx;
   border: 1px white solid;

   &.shadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   }


   &.exception {
    background: rgb(255, 239, 239);
    background: linear-gradient(180deg, rgba(255, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px #ff9999 solid;
   }

   .card-title {
    border-bottom: 1px #e3e3e3 solid;

    .title-warp {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: 12rpx 22rpx;

     .prefix {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 38rpx;

      .icon {
       position: relative;
       top: 3px;
       margin-right: 8rpx;
      }

      .progress {
       font-size: 20rpx
      }
     }

    }
   }

   .content {
    min-height: 32rpx;
    padding: 12rpx 22rpx;

    .exception-tip {
     display: flex;
     flex-direction: row;
     align-items: center;
     color: #ff1c1f;
     font-weight: 600;

     .error-icon {
      position: relative;
      top: 3px;
      margin-right: 12rpx;
     }
    }

    .cell-footer {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     //border-top: #dddddd 1px solid;
     padding: 12rpx 22rpx;

    }
   }

  }

 }
</style>
